<template>
    <div>
        <div class="recommend-title">热销推荐</div>
        <ul>
            <router-link 
                :to="'/detail/'+ item.id" tag="li" 
                class="item border-bottom" 
                v-for="item of list" 
                :key="item.id">
                        <img  class="item-img"  :src="item.imgUrl" />
                    <div class="item-info">
                        <p class="item-title">{{item.title}}</p>
                        <p class="item-desc">{{item.desc}}</p>
                        <button class="item-button">查看详细</button>
                    </div>
            </router-link>
        </ul>
    </div>
</template>

<script>

export default {
  name: 'HomeRecommend',
  props:{
      list: Array
  },
  data () {
      return {
          recommendList: [{
              id: '0001',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/201403/07/f52884e092cdd5c808c2e9bd226c0c0f.jpg_200x200_b183c09a.jpg', 
              title: '金斗湾怡乐园',
              desc: '金斗湾怡乐园的简介',
          },{
              id: '0002',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/1804/57/570812106eff912ea3.img.jpg_200x200_1a581ad1.jpg',
              title: '中山长江水世界',
              desc: '中山长江水世界的简介',
          },{
              id: '0003',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/201403/07/228c4f111a52f45c3c69937813f384ae.jpg_200x200_3f7c6ca8.jpg',
              title: '中山影视城',
              desc: '中山影视城的简介',
          },{
              id: '0004',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/1804/43/4351334b2536a049a3.img.jpg_200x200_a3bc8fcb.jpg',
              title: '泉林山庄水上乐园',
              desc: '泉林山庄水上乐园的简介',
          }]
      }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
    .recommend-title
        margin-top: .2rem
        line-height: .8rem
        background: #eee
        // 将段落的第一行缩进
        text-indent: .2rem
    .item
        overflow: hidden
        display: flex
        height: 1.9rem
        .item-img
            width: 1.7rem
            height: 1.7rem 
            padding: .1rem 
        .item-info
            flex: 1
            padding: .1rem 
            //假如min防止长度过长不省略
            min-width: 0
        .item-title
            line-height: .54rem 
            font-size: .32rem 
            ellipsis()
        .item-desc
            line-height: .4rem 
            color: #ccc
            ellipsis()
        .item-button
            line-height: .44rem 
            margin-top: .16rem
            background: #ff9300
            padding: 0 .2rem  
            //圆角
            border-radius: .06rem 
            color: #fff


</style>
